{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>{% block title %}{% endblock %}</title>
    <link href="{% static 'css/base.css' %}" rel="stylesheet">
</head>
<body>
<div id="header">
    <span class="logo">Bookmarks</span>
    {% if request.user.is_authenticated %}
        <ul class="menu">
            <li {% if section == 'dashboard' %}class="selected"{% endif %}>
                <a href="{% url 'account:dashboard' %}">My dashboard</a>
            </li>
            <li {% if section  == 'images' %}class="selected"{% endif %}><a href="{% url 'images:list' %}">Images</a></li>
            <li {% if section  == 'people' %}class="selected"{% endif %}><a href="{% url 'account:user_list' %}">People</a></li>
        </ul>
    {% endif %}

    <span class="user">
        {% if request.user.is_authenticated %}
            Hello {{ request.user.first_name }},{{ request.user.username }},
            <a href="{% url 'account:logout' %}">Logout</a>
        {% else %}
            <a href="{% url 'account:login' %}">Login</a>
        {% endif %}
    </span>
</div>

{% if messages %}
    <ul class="messages">
        {% for message in messages %}
            <li class="{{ message.tags }}">{{ message|safe }}<a href="#" class="close">X</a></li>
        {% endfor %}
    </ul>
{% endif %}

<div id="content">
    {% block content %}
    {% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    let csrftoken = Cookies.get('csrftoken');

    function csrfSafeMethon(method) {
        // 如下的HTTP请求不需要设置CRSF信息
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethon(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    $(document).ready(function () {
        {% block domready %}
            $('a.like').click(function (e) {
                e.preventDefault();
                $.post('{% url 'images:like' %}',
                    {
                        id: $(this).data('id'),
                        action: $(this).data('action'),
                    },
                    function (data) {
                        if (data['status'] === 'ok') {
                            let previous_action = $('a.like').data('action');
                            //切换 data-action 属性
                            $('a.like').data('action', previous_action === 'like' ? 'unlike' : 'like');
                            //切换按钮文本
                            $('a.like').text(previous_action === 'like' ? 'Unlike' : 'Like');
                            //更新总的喜欢人数
                            let previous_likes = parseInt($('span.count.total').text());
                            $('span.count.total').text(previous_action === 'like' ? previous_likes + 1 : previous_likes - 1);
                        }
                    }
                );
            });
        {% endblock %}
    });
</script>
</body>
</html>